import React, {Component} from 'react';
import {
    StyleSheet,
    ScrollView,
    Text,
    View,
    TouchableOpacity,
    Alert,
    FlatList,
    RefreshControl,
    ActivityIndicator,
    Image,
    TextInput,
} from 'react-native';
import {List, Tabs, WingBlank, Flex, Toast, Modal, PickerView, Button, WhiteSpace, InputItem} from '@ant-design/react-native';
import {getCompanyBuildingList, getOwnerStatistics, getCompanyListForAgent, setCompanyAgentVerify} from '~/api/company';
import {getOwnerParkingOrderStatistics, getOwnerParkingFavoriteStatistics, setParkingOrderState} from '~/api/parking';
import {getCompanyApplyList} from '~/api/company';
import moment from 'moment';
const renderContent = (tab, index) => {
    const style = {
        paddingVertical: 40,
        justifyContent: 'center',
        alignItems: 'center',
        margin: 10,
        backgroundColor: '#ddd',
    };
};
let pagecount = 0;
let index = 1;
let size = 10;
class Mydeveloper extends React.Component {
    static navigationOptions = {
        title: '我的开发商',
    };

    constructor(porps) {
        //调用基类的所有的初始化方法
        super(porps);
        // 设置当前组件的属性
        this.state = {
            list: [],
            tabvalue: 0,
            index: 1,
            page_index: 1,
            page_size: 10,
            isLoading: false, //加载
            refreshing: false,
            footer: 0, //上拉底部显示
            value: undefined,
            visible: false,
            buildlist: [],
            buildId: 0,
            buildName: '',
            totalcount: 0,
            tabinfo: 0,
            tabs: [
                {title: '待入驻', value: 6},
                {title: '已入驻', value: 0},
                {title: '审核失败', value: 7},
            ],
            textinfo: '',
            companyapplyid: '',
        };
        this.TabClick = this.TabClick.bind(this);
        this.onClose = () => {
            this.setState({
                visible: false,
            });
        };
    }
    TabClick(tab) {
        this.state.tabinfo = tab.value;
        this.setState(
            {
                page_index: index, //页
                page_size: size, //每页条数
            },
            () => {
                this.GetList();
            },
        );
    }

    GetList() {
        if (this.state.tabinfo === 0) {
            getCompanyListForAgent({
                page_index: this.state.page_index,
                page_size: this.state.page_size,
            }).then((r) => {
                if (r.code === 0) {
                    this.setState({
                        list: r.data.list,
                        totalcount: r.data.total_item_count,
                        footer: 0,
                    });
                    if (this.state.page_index === 1) {
                        pagecount = r.data.total_page_count;
                        this.setState({
                            footer: r.data.total_item_count < 10 ? 2 : 0,
                        });
                    }
                }
            });
        } else {
            getCompanyApplyList({
                page_index: this.state.page_index,
                page_size: this.state.page_size,
                condidate: {
                    tabkey: this.state.tabinfo === 6 ? '' : this.state.tabinfo,
                },
            }).then((r) => {
                if (r.code === 0) {
                    this.setState({
                        list: r.data.list,
                        totalcount: r.data.total_item_count,
                        footer: 0,
                    });
                    if (this.state.page_index === 1) {
                        pagecount = r.data.total_page_count;
                        this.setState({
                            footer: r.data.total_item_count < 10 ? 2 : 0,
                        });
                    }
                }
            });
        }
    }
    setTextinfo = (text) => {
        this.setState({
            textinfo: text,
        });
    };
    comfire(id) {
        this.setState({
            visible: true,
            companyapplyid: id,
        });
    }
    comfirecompany(state) {
        setCompanyAgentVerify({
            applyId: this.state.companyapplyid,
            state: state,
            note: this.state.textinfo,
        }).then((r) => {
            this.onClose();
            if (r.code === 0) {
                this.GetList();
            } else {
                Toast.info(r.msg);
            }
        });
    }

    _onRefresh() {
        this.setState({footer: 0, page_index: index, page_size: size}, () => {
            this.GetList();
        });
    }
    //上拉加载更多
    loadData = () => {
        this.setState({isLoading: false});
        let dataArray = [];
        if (pagecount - 1 > 0) {
            pagecount = pagecount - 1;
            this.setState(
                {
                    page_index: this.state.page_index + 1,
                    footer: 1,
                },
                () => {
                    if (this.state.tabinfo === 0) {
                        getCompanyListForAgent({
                            page_index: this.state.page_index,
                            page_size: this.state.page_size,
                        }).then((r) => {
                            dataArray = r.data.list;
                            dataArray = this.state.list.concat(dataArray);
                            if (r.code === 0) {
                                this.setState({
                                    list: dataArray,
                                    isLoading: false,
                                });
                            }
                        });
                    } else {
                        getCompanyApplyList({
                            page_index: this.state.page_index,
                            page_size: this.state.page_size,
                            condidate: {
                                tabkey: this.state.tabinfo === 6 ? '' : this.state.tabinfo,
                            },
                        }).then((r) => {
                            dataArray = r.data.list;
                            dataArray = this.state.list.concat(dataArray);
                            if (r.code === 0) {
                                this.setState({
                                    list: dataArray,
                                    isLoading: false,
                                });
                            }
                        });
                    }
                },
            );
        } else {
            this.setState({
                footer: 2,
            });
        }
    };

    //上拉底部显示
    genIndicator() {
        if (this.state.footer === 1) {
            return (
                <View style={styles.indicatorContainer}>
                    <ActivityIndicator style={styles.indicator} size={'large'} animating={true} />
                    <Text style={{textAlign: 'center'}}>正在加载更多</Text>
                </View>
            );
        } else if (this.state.footer === 2) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        没有更多数据了
                    </Text>
                </View>
            );
        } else if (this.state.footer === 0) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        上拉加载更多
                    </Text>
                </View>
            );
        }
    }
    _renderItem(item) {
        return (
            <WingBlank
                style={{
                    backgroundColor: 'white',
                    marginTop: 10,
                    borderRadius: 10,
                }}>
                {this.state.tabinfo === 0 ? (
                    <Flex
                        onPress={() => {
                            this.props.navigation.push('DevelopersDetails', {CompanyDataID: item.CompanyDataID});
                        }}
                        direction={'column'}
                        style={{
                            width: '100%',
                            paddingTop: '3%',
                            paddingBottom: 10,
                        }}>
                        <Flex
                            style={{
                                width: '100%',
                                paddingLeft: 15,
                                paddingRight: 15,
                                paddingTop: 9,
                            }}
                            justify={'between'}>
                            <Text numberOfLines={1} style={{color: '#666666', fontWeight: 'bold'}}>
                                {item.CompanyName}
                            </Text>
                            <Text numberOfLines={1} style={{color: '#ec4f46', fontWeight: 'bold'}}>
                                {item.CompanyState === 1 && '正常'}
                                {item.CompanyState === 2 && '失效'}
                                {item.CompanyState === 6 && '待审'}
                                {item.CompanyState === 7 && '审核失败'}
                            </Text>
                        </Flex>
                        <View style={{width: '100%', height: 1, backgroundColor: '#EEEEEE', marginTop: 10}} />
                        <Flex
                            style={{
                                width: '100%',
                                paddingLeft: 15,
                                paddingRight: 15,
                                paddingTop: 9,
                            }}
                            justify={'between'}>
                            <Text style={{fontSize: 15, color: '#666666'}}>联系人</Text>
                            <Text
                                style={{
                                    color: '#666666',
                                    fontWeight: 'bold',
                                }}>
                                {item.Contacter}
                            </Text>
                        </Flex>
                        <Flex
                            style={{
                                width: '100%',
                                paddingLeft: 15,
                                paddingRight: 15,
                                paddingTop: 9,
                            }}
                            justify={'between'}>
                            <Text
                                style={{
                                    fontSize: 15,
                                    color: '#666666',
                                }}>
                                联系电话：
                            </Text>
                            <Text style={{color: '#666666', fontWeight: 'bold'}}>{item.Telephone}</Text>
                        </Flex>
                        <Flex
                            style={{
                                width: '100%',
                                paddingLeft: 15,
                                paddingRight: 15,
                                paddingTop: 9,
                            }}
                            justify={'between'}>
                            <Text style={{fontSize: 15, color: '#666666'}}>地址：</Text>
                            <Text
                                numberOfLines={1}
                                style={{
                                    color: '#666666',
                                    fontWeight: 'bold',
                                }}>
                                {item.CityName}
                                {item.Address}
                            </Text>
                        </Flex>
                        <View style={{width: '100%', height: 1, backgroundColor: '#EEEEEE', marginTop: 10}} />
                        <Flex
                            style={{
                                width: '100%',
                                paddingLeft: 15,
                                paddingRight: 15,
                                paddingTop: 9,
                            }}
                            justify={'between'}>
                            <Text numberOfLines={1} style={{color: '#666666', fontWeight: 'bold'}}>
                                入驻时间：{moment(item.RegDateTime).format('YYYY-MM-DD HH:mm:ss')}
                            </Text>
                        </Flex>
                    </Flex>
                ) : (
                    <Flex
                        direction={'column'}
                        style={{
                            width: '100%',
                            paddingTop: '3%',
                            paddingBottom: 10,
                        }}>
                        <Flex
                            style={{
                                width: '100%',
                                paddingLeft: 15,
                                paddingRight: 15,
                                paddingTop: 9,
                            }}
                            justify={'between'}>
                            <Text style={{color: '#666666', fontWeight: 'bold'}}>{item.CompanyName}</Text>
                            <Text style={{color: '#ec4f46', fontWeight: 'bold'}}>
                                {item.AgentVerify === 6 && '待审'}
                                {item.AgentVerify === 1 && '初审通过 平台待审'}
                                {item.AgentVerify === 7 && '初审失败'}
                            </Text>
                        </Flex>
                        <View style={{width: '100%', height: 1, backgroundColor: '#EEEEEE', marginTop: 10}} />
                        <Flex
                            style={{
                                width: '100%',
                                paddingLeft: 15,
                                paddingRight: 15,
                                paddingTop: 9,
                            }}
                            justify={'between'}>
                            <Text style={{fontSize: 15, color: '#666666'}}>联系人</Text>
                            <Text
                                style={{
                                    color: '#666666',
                                    fontWeight: 'bold',
                                }}>
                                {item.ContacName}
                            </Text>
                        </Flex>
                        <Flex
                            style={{
                                width: '100%',
                                paddingLeft: 15,
                                paddingRight: 15,
                                paddingTop: 9,
                            }}
                            justify={'between'}>
                            <Text
                                style={{
                                    fontSize: 15,
                                    color: '#666666',
                                }}>
                                联系电话：
                            </Text>
                            <Text style={{color: '#666666', fontWeight: 'bold'}}>{item.ContacPhone}</Text>
                        </Flex>
                        <Flex
                            style={{
                                width: '100%',
                                paddingLeft: 15,
                                paddingRight: 15,
                                paddingTop: 9,
                            }}
                            justify={'between'}>
                            <Text style={{fontSize: 15, color: '#666666'}}>地址：</Text>
                            <Text
                                numberOfLines={1}
                                style={{
                                    color: '#666666',
                                    fontWeight: 'bold',
                                }}>
                                {item.CityName}
                                {item.Address}
                            </Text>
                        </Flex>
                        <View style={{width: '100%', height: 1, backgroundColor: '#EEEEEE', marginTop: 10}} />
                        <Flex
                            style={{
                                width: '100%',
                                paddingLeft: 15,
                                paddingRight: 15,
                                paddingTop: 9,
                            }}
                            justify={'between'}>
                            <Text style={{color: '#666666', fontWeight: 'bold'}}>申请时间：{item.RegDateTime}</Text>
                            {item.AgentVerify === 6 && (
                                <Text
                                    onPress={() => {
                                        item.AgentVerify === 6 && this.comfire(item.CompanyApplyID);
                                    }}
                                    style={styles.textbuttom5}>
                                    审核
                                </Text>
                            )}
                        </Flex>
                        <Modal popup visible={this.state.visible} animationType="slide-up" onClose={this.onClose}>
                            <Text style={{margin: 20}}>确认通过该开发商的审核？</Text>
                            <Text style={{padding: 20}}>审核意见</Text>
                            <InputItem placeholder="请输入审核意见" placeholderTextColor="gray" type="text" onChange={this.setTextinfo} />
                            <Flex justify={'around'}>
                                <Button
                                    onPress={() => {
                                        this.comfirecompany(7);
                                    }}
                                    style={{
                                        width: '45%',
                                        marginTop: 30,
                                        backgroundColor: '#F2BC38',
                                        borderColor: '#F2BC38',
                                    }}
                                    type={'primary'}>
                                    审核不通过
                                </Button>
                                <Button
                                    style={{width: '45%', marginTop: 30}}
                                    type={'warning'}
                                    onPress={() => {
                                        this.comfirecompany(1);
                                    }}>
                                    审核通过
                                </Button>
                            </Flex>
                        </Modal>
                    </Flex>
                )}
            </WingBlank>
        );
    }
    render() {
        return (
            <View style={{flex: 1}}>
                <Tabs tabs={this.state.tabs} prerenderingSiblingsNumber={0} onChange={this.TabClick}>
                    <FlatList
                        data={this.state.list}
                        style={{width: '100%'}}
                        showsVerticalScrollIndicator={false}
                        renderItem={(data) => this._renderItem(data.item)}
                        keyExtractor={(item, index) => index}
                        ListFooterComponent={() => this.genIndicator()} //上拉加载更多视图
                        onEndReached={() => {
                            this.loadData();
                        }}
                        onEndReachedThreshold={0.1} // 这个属性的意思是 当滑动到距离列表内容底部不足 0.1*列表内容高度时触发onEndReached函数 为啥要加这个属性 因为不加的话滑动一点点就会立即触发onReached函数，看不到菊花加载中
                        refreshing={true}
                        refreshControl={
                            <RefreshControl
                                refreshing={this.state.refreshing}
                                onRefresh={() => {
                                    this._onRefresh();
                                }}
                            />
                        }
                    />
                </Tabs>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    textbuttom5: {
        fontSize: 14,
        width: 80,
        height: 30,
        borderWidth: 1,
        borderColor: '#Ec4f46',
        borderRadius: 15,
        color: '#Ec4f46',
        textAlign: 'center',
        paddingTop: 5,
        marginLeft: 5,
    },
});

export const title = 'Tabs';
export const description = 'Tabs example';

export default Mydeveloper;
